Conditions | 1 |
Paths | 4 |
Total Lines | 434 |
Lines | 0 |
Ratio | 0 % |
Changes | 1 | ||
Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | import ImageUpload from './imageupload.js'; |
||
6 | var DFI = function(dfiIndex, parentForm) { |
||
7 | |||
8 | /** |
||
9 | * dfi variable is created to represent DFI instance. |
||
10 | */ |
||
11 | var dfi = this; |
||
12 | |||
13 | /** |
||
14 | * index variable is created to represent DFI index. |
||
15 | */ |
||
16 | var index = dfiIndex; |
||
17 | |||
18 | /** |
||
19 | * id variable is create to represent id of the DFI |
||
20 | */ |
||
21 | var id = '#item-option-origin-' + index; |
||
22 | |||
23 | /** |
||
24 | * element variable is created to be a master element of the DFI, all the variable will be found via element variable. |
||
25 | */ |
||
26 | var element = $(id); |
||
27 | |||
28 | /** |
||
29 | * postType variable is created to represent Post Type part of the DFI. |
||
30 | */ |
||
31 | var postType; |
||
32 | |||
33 | /** |
||
34 | * taxonomies variable is created to represent all Taxonomy parts of the DFI. |
||
35 | */ |
||
36 | var taxonomies; |
||
37 | |||
38 | /** |
||
39 | * imageUpload variable is created to represent ImageUpload part of the DFI. |
||
40 | */ |
||
41 | var imageUpload; |
||
42 | |||
43 | /** |
||
44 | * deleteButton variable is created to represent Delete Buton of the DFI. |
||
45 | */ |
||
46 | var deleteButton; |
||
47 | |||
48 | /** |
||
49 | * errors variable is temporary variable to store all errors of the DFI. |
||
50 | */ |
||
51 | var errors = []; |
||
52 | |||
53 | /** |
||
54 | * layout variable is created to handle all rendering layout stuff for the DFI. |
||
55 | */ |
||
56 | var layout = new Layout(); |
||
57 | |||
58 | /** |
||
59 | * Initialize actions when create a instance of the DFI. |
||
60 | */ |
||
61 | this.init = function() { |
||
62 | /* Assign all exist layout to corresponding variable. */ |
||
63 | dfi._checkLayoutAndAssignVariable(); |
||
64 | /** |
||
65 | * Check if the DFI has a Post Type part. |
||
66 | * If yes, Bind on selected feature when user changed the value of the post type. |
||
67 | */ |
||
68 | if(typeof postType !== 'undefined') { dfi._onSelectedPostType(); } |
||
69 | /* |
||
70 | * Check if the DFI has a Delete Button. |
||
71 | * If yes, Bind delete feature when user click on Delete Button. |
||
72 | */ |
||
73 | if(typeof deleteButton !== 'undefined') { dfi.onDelete(); } |
||
74 | } |
||
75 | |||
76 | /** |
||
77 | * Check all exist parts and assign it to corresponding variable. |
||
78 | */ |
||
79 | this._checkLayoutAndAssignVariable = function() { |
||
80 | /* First: Check if PostType part exist. |
||
81 | * If yes, assign PostType part to postType variable. |
||
82 | */ |
||
83 | if(dfi._checkLayoutExist('.post-type-row')) { |
||
84 | postType = new PostType(id+' > .post-type-row'); |
||
85 | } |
||
86 | |||
87 | /* Second: Check if Taxonomy parts exist. |
||
88 | * If yes, assign Taxonomy part to taxonomies variable. |
||
89 | */ |
||
90 | if(dfi._checkLayoutExist('.taxonomy-row')) { |
||
91 | var _taxonomies = []; |
||
92 | $(id+' > .taxonomy-row').each(function(index, value){ |
||
93 | _taxonomies.push(new Taxonomy(value)); |
||
94 | }); |
||
95 | taxonomies = _taxonomies; |
||
96 | } |
||
97 | |||
98 | |||
99 | /* Third: Check if ImageUpload part exist. |
||
100 | * If yes, assign ImageUpload part to imageUpload variable. |
||
101 | */ |
||
102 | if(dfi._checkLayoutExist('.image-upload-row')) { |
||
103 | imageUpload = new ImageUpload(id+' > .image-upload-row'); |
||
104 | } |
||
105 | |||
106 | /* Fourth: Check if Delete Button exist. |
||
107 | * If yes, assign deleteButton variable to Delete Button. |
||
108 | */ |
||
109 | if(dfi._checkLayoutExist('.btn-remove')) { |
||
110 | deleteButton = $(id+' > .btn-remove'); |
||
111 | } |
||
112 | } |
||
113 | |||
114 | /** |
||
115 | * Validate input data of the DFI. |
||
116 | */ |
||
117 | this.validate = function() { |
||
118 | /** |
||
119 | * Check if PostType value is exist. |
||
120 | * If PostType value is exist, check if ImageUpload value is exist. |
||
121 | * If ImageUpload value is not exist, store an error in errors variable, then return false. |
||
122 | * If PostType value is not exist, store an error in errors variable, then return false. |
||
123 | */ |
||
124 | if(!postType.getValue()) { |
||
125 | dfi._storeError('Post Type value on DFI ' + index + ' must be not empty'); |
||
126 | return false; |
||
127 | } else { |
||
128 | if(!imageUpload.getId() || !imageUpload.getSource()) { |
||
129 | dfi._storeError('Uploaded image value on DFI ' + index + ' must be not empty'); |
||
130 | return false; |
||
131 | } |
||
132 | } |
||
133 | return true; |
||
134 | } |
||
135 | |||
136 | /** |
||
137 | * Store error in errors variable. |
||
138 | */ |
||
139 | this._storeError = function(error) { |
||
140 | |||
141 | errors.push(error); |
||
142 | |||
143 | } |
||
144 | |||
145 | /** |
||
146 | * Truncate errors variable to store new errors of the DFI. |
||
147 | */ |
||
148 | this.truncateErrors = function() { |
||
149 | |||
150 | errors = []; |
||
151 | |||
152 | } |
||
153 | |||
154 | /** |
||
155 | * Return the errors of the DFI. |
||
156 | */ |
||
157 | this.getErrors = function() { |
||
158 | /* Return the errors variable. */ |
||
159 | return errors; |
||
160 | } |
||
161 | |||
162 | |||
163 | /** |
||
164 | * Bind delete feature when click on Delete Button. |
||
165 | */ |
||
166 | this.onDelete = function() { |
||
167 | deleteButton.click(function(event){ |
||
168 | /* Delete the dfi element. */ |
||
169 | event.preventDefault(); |
||
170 | element.slideUp( '300', function() { |
||
171 | element.remove(); |
||
172 | /** |
||
173 | * Remove dfi from parent form. |
||
174 | * Note that javascript array index start from 0, so we need to minus 1 |
||
175 | */ |
||
176 | parentForm.removeDFI(index - 1); |
||
177 | }); |
||
178 | }); |
||
179 | } |
||
180 | |||
181 | /** |
||
182 | * Actions when user select a post type. |
||
183 | */ |
||
184 | this._onSelectedPostType = function() { |
||
185 | /* Bind actions when user select a post type. */ |
||
186 | postType.selectElement.change(function() { |
||
187 | /* First: Delete related layout. */ |
||
188 | dfi._deleteLayouts([taxonomies, imageUpload]); |
||
189 | /* Second: Truncate related variables. */ |
||
190 | dfi._truncateVariables(['taxonomies', 'imageUpload']); |
||
191 | /** |
||
192 | * Third: |
||
193 | * Check if selected value is not the blank value |
||
194 | * If yes: |
||
195 | * Get related layout. |
||
196 | * Add layout just received to the bottom of the dfi. |
||
197 | * Redo checkLayoutAndAssignVariable. |
||
198 | */ |
||
199 | if(postType.getValue()) { |
||
200 | layout.getRelatedDFILayout(index, postType.getValue()) |
||
201 | .done(dfi._addLayout) |
||
202 | .then(dfi._checkLayoutAndAssignVariable); |
||
203 | } |
||
204 | }); |
||
205 | } |
||
206 | |||
207 | /** |
||
208 | * Get Related Layout, related layout include taxonomies, image upload and image size. |
||
209 | */ |
||
210 | this._getRelatedLayout = function() { |
||
211 | return $.ajax({ |
||
212 | url: '/wp-admin/admin-ajax.php?action=wpdfi_get_related_layout', |
||
213 | method: 'POST', |
||
214 | data: { |
||
215 | post_type: postType.getValue() |
||
216 | }, |
||
217 | }) |
||
218 | } |
||
219 | |||
220 | /** |
||
221 | * Add new layout to the bottom of the DFI. |
||
222 | */ |
||
223 | this._addLayout = function(layout) { |
||
224 | element.append(JSON.parse(layout)); |
||
225 | } |
||
226 | |||
227 | /** |
||
228 | * Truncate DFI Variables. |
||
229 | */ |
||
230 | this._truncateVariables = function(variables) { |
||
231 | /** |
||
232 | * We will need to modify the variable of the object, so we need to do something like pointer in this situation. |
||
233 | * Unfortunately, there is no pointer in javascript. So I will use eval() function in this situation. |
||
234 | */ |
||
235 | |||
236 | /* Loop through each element of variables array. */ |
||
237 | variables.forEach(function(_var) { |
||
238 | /* Check if the variable is not undefined. */ |
||
239 | if(eval("typeof " + _var + " != 'undefined'")) { |
||
|
|||
240 | eval(_var + ' = null'); |
||
241 | } |
||
242 | |||
243 | }); |
||
244 | } |
||
245 | |||
246 | /** |
||
247 | * Delete DFI Layouts. |
||
248 | */ |
||
249 | this._deleteLayouts = function(variables) { |
||
250 | |||
251 | /* Loop through each element of variables array. */ |
||
252 | variables.forEach(function(_var) { |
||
253 | /* Check if the variable is not undefined. */ |
||
254 | if(typeof _var !== 'undefined' && _var) { |
||
255 | /* Delete part */ |
||
256 | /* Check if variable can be looped or not. */ |
||
257 | if(typeof _var.length !== 'undefined') { |
||
258 | /* If yes, loop through each element and call to delete function. */ |
||
259 | _var.forEach(function(objectElement) { |
||
260 | objectElement.delete(); |
||
261 | }) |
||
262 | /* If variable can not be looped, call to delete function. */ |
||
263 | } else { |
||
264 | _var.delete(); |
||
265 | } |
||
266 | } |
||
267 | }); |
||
268 | } |
||
269 | |||
270 | /** |
||
271 | * Check if layout exist or not via class name. |
||
272 | */ |
||
273 | this._checkLayoutExist = function(className) { |
||
274 | if(element.find(className).length > 0) { return true; } |
||
275 | return false; |
||
276 | } |
||
277 | |||
278 | /** |
||
279 | * Get ID of the dfi. |
||
280 | */ |
||
281 | this.getId = function() { |
||
282 | |||
283 | return id; |
||
284 | |||
285 | } |
||
286 | |||
287 | /** |
||
288 | * Get data index of the dfi. |
||
289 | */ |
||
290 | this.getIndex = function() { |
||
291 | |||
292 | return index; |
||
293 | |||
294 | } |
||
295 | |||
296 | /** |
||
297 | * Remove delete button. |
||
298 | */ |
||
299 | this.removeDeleteButton = function() { |
||
300 | |||
301 | dfi._removeDeleteButtonEl(); |
||
302 | |||
303 | } |
||
304 | |||
305 | /** |
||
306 | * Remove delete button element. |
||
307 | */ |
||
308 | this._removeDeleteButtonEl = function() { |
||
309 | |||
310 | deleteButton.remove(); |
||
311 | dfi._truncateVariables(['deleteButton']); |
||
312 | |||
313 | } |
||
314 | |||
315 | /** |
||
316 | * Add new delete button. |
||
317 | */ |
||
318 | this.addDeleteButton = function() { |
||
319 | |||
320 | dfi._addDeleteButtonEl(); |
||
321 | dfi._updateDeleteButtonVar(); |
||
322 | |||
323 | } |
||
324 | |||
325 | /** |
||
326 | * Add new delete button element to the dfi. |
||
327 | */ |
||
328 | this._addDeleteButtonEl = function() { |
||
329 | |||
330 | var newDeleteButton = layout.getDeleteButtonLayout(); |
||
331 | console.log(newDeleteButton); |
||
332 | element.append(newDeleteButton); |
||
333 | |||
334 | } |
||
335 | |||
336 | /** |
||
337 | * Update delete button variable. |
||
338 | */ |
||
339 | this._updateDeleteButtonVar = function() { |
||
340 | |||
341 | deleteButton = element.find('.btn-remove'); |
||
342 | |||
343 | } |
||
344 | |||
345 | this.reindex = function(newIndex) { |
||
346 | var oldIndex = index; |
||
347 | index = newIndex; |
||
348 | dfi._updateID(); |
||
349 | dfi._updateElement(); |
||
350 | dfi._updateDataIndex(); |
||
351 | dfi._updateInput(oldIndex, newIndex); |
||
352 | dfi._updateSelect(oldIndex, newIndex); |
||
353 | dfi._updateLabel(); |
||
354 | dfi._truncateVariables(['postType', 'taxonomies', 'imageUpload', 'deleteButton']); |
||
355 | dfi._checkLayoutAndAssignVariable(); |
||
356 | |||
357 | } |
||
358 | |||
359 | /** |
||
360 | * Update ID of the dfi. |
||
361 | */ |
||
362 | this._updateID = function() { |
||
363 | |||
364 | id = '#item-option-origin-' + index; |
||
365 | |||
366 | } |
||
367 | |||
368 | /** |
||
369 | * Update Element of the dfi. |
||
370 | */ |
||
371 | this._updateElement = function() { |
||
372 | var idVal = id.replace('#', ''); |
||
373 | element.attr('id', idVal); |
||
374 | element = $(id); |
||
375 | |||
376 | } |
||
377 | |||
378 | /** |
||
379 | * Update attribute data-index of the dfi. |
||
380 | */ |
||
381 | this._updateDataIndex = function() { |
||
382 | |||
383 | element.attr('data-index', index); |
||
384 | |||
385 | } |
||
386 | |||
387 | /** |
||
388 | * Reindex input of the dfi. |
||
389 | */ |
||
390 | this._updateInput = function(oldIndex, newIndex) { |
||
391 | |||
392 | element.find('input').each(function(){ |
||
393 | var oldName = $(this).attr('name'); |
||
394 | var validName = (typeof oldName != 'undefined'); |
||
395 | /* Need to check name is valid or not before update the new name for the input. */ |
||
396 | if(validName) { |
||
397 | /* Get the new name of the input by replace old index with new index. */ |
||
398 | var newName = oldName.replace(oldIndex, newIndex); |
||
399 | /* Update new name for the input. */ |
||
400 | $(this).attr('name', newName); |
||
401 | } |
||
402 | |||
403 | }); |
||
404 | |||
405 | } |
||
406 | |||
407 | /** |
||
408 | * Reindex select input of the dfi. |
||
409 | */ |
||
410 | this._updateSelect = function(oldIndex, newIndex) { |
||
411 | |||
412 | element.find('select').each(function(){ |
||
413 | |||
414 | var oldName = $(this).attr('name'); |
||
415 | var validName = (typeof oldName != 'undefined'); |
||
416 | /* Need to check name is valid or not before update the new name for the select input. */ |
||
417 | if(validName) { |
||
418 | /* Get the new name of the select input by replace old index with new index. */ |
||
419 | var newName = oldName.replace(oldIndex, newIndex); |
||
420 | /* Update new name for the select input. */ |
||
421 | $(this).attr('name', newName); |
||
422 | } |
||
423 | }); |
||
424 | |||
425 | }; |
||
426 | |||
427 | /** |
||
428 | * Update dfi label with new index. |
||
429 | */ |
||
430 | this._updateLabel = function() { |
||
431 | var labelClass = '.dfi-label'; |
||
432 | var label = element.find(labelClass); |
||
433 | /* Remove current label. */ |
||
434 | label.empty(); |
||
435 | /* Update new label. */ |
||
436 | label.text('DFI ' + index); |
||
437 | |||
438 | } |
||
439 | } |
||
440 | |||
443 |